<template>
  <div class="common-table-component">
    <a-table
      :loading="loading"
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      :row-key="record => record.id"
      :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
      @change="handleTableChange"
      :scroll="{ x: 'max-content' }"
    >
      <template #bodyCell="{ column, record }">
        <!-- 通知类型 -->
        <template v-if="column.key === 'type'">
          <a-tag v-if="record.type === NotificationType.SYSTEM" color="blue">{{ $t('notification.typeSystem') }}</a-tag>
          <a-tag v-else-if="record.type === NotificationType.TASK" color="green">{{ $t('notification.typeTask') }}</a-tag>
          <a-tag v-else-if="record.type === NotificationType.MESSAGE" color="orange">{{ $t('notification.typeMessage') }}</a-tag>
          <a-tag v-else-if="record.type === NotificationType.TODO" color="purple">{{ $t('notification.typeTodo') }}</a-tag>
        </template>

        <!-- 通知级别 -->
        <template v-else-if="column.key === 'level'">
          <a-tag v-if="record.level === NotificationLevel.NORMAL" color="default">{{ $t('notification.levelNormal') }}</a-tag>
          <a-tag v-else-if="record.level === NotificationLevel.IMPORTANT" color="warning">{{ $t('notification.levelImportant') }}</a-tag>
          <a-tag v-else-if="record.level === NotificationLevel.URGENT" color="error">{{ $t('notification.levelUrgent') }}</a-tag>
        </template>

        <!-- 通知状态 -->
        <template v-else-if="column.key === 'status'">
          <a-badge v-if="record.status === NotificationStatus.UNREAD" status="processing" :text="$t('notification.statusUnread')" />
          <a-badge v-else status="default" :text="$t('notification.statusRead')" />
        </template>

        <!-- 创建时间 -->
        <template v-else-if="column.key === 'createTime'">
          <span>{{ formatDate(record.createTime) }}</span>
        </template>

        <!-- 操作 -->
        <template v-else-if="column.key === 'action'">
          <div class="action-column">
            <a-button type="link" size="small" @click="handleView(record)">
              <template #icon><EyeOutlined /></template>
              {{ $t('common.view') }}
            </a-button>
            <a-button 
              v-if="record.status === NotificationStatus.UNREAD" 
              type="link" 
              size="small" 
              @click="handleMarkRead(record)"
            >
              <template #icon><CheckOutlined /></template>
              {{ $t('notification.markRead') }}
            </a-button>
            <a-popconfirm
              :title="$t('notification.confirmDelete')"
              @confirm="handleDelete(record)"
              :ok-text="$t('common.confirm')"
              :cancel-text="$t('common.cancel')"
            >
              <a-button type="link" size="small" danger>
                <template #icon><DeleteOutlined /></template>
                {{ $t('common.delete') }}
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import type { TablePaginationConfig, TableColumnsType } from 'ant-design-vue'
import { NotificationType, NotificationStatus, NotificationLevel } from '@/types/api/notification'
import type { Notification } from '@/types/api/notification'
import type { Key } from 'ant-design-vue/es/table/interface'

defineOptions({
  name: 'NotificationTable'
})

// Props定义
const props = withDefaults(defineProps<{
  loading?: boolean
  columns: TableColumnsType
  dataList: Notification[]
  pagination: TablePaginationConfig
  selectedRowKeys: string[]
}>(), {
  loading: false,
  dataList: () => [],
  selectedRowKeys: () => []
})

// Emits定义
const emit = defineEmits([
  'table-change', 
  'selection-change', 
  'view', 
  'mark-read', 
  'delete'
])

// 表格选择变更
const onSelectChange = (keys: Key[]) => {
  emit('selection-change', keys as string[])
}

// 表格变更
const handleTableChange = (pagination: TablePaginationConfig) => {
  emit('table-change', pagination)
}

// 查看通知
const handleView = (record: any) => {
  emit('view', record as Notification)
}

// 标记已读
const handleMarkRead = (record: any) => {
  emit('mark-read', record as Notification)
}

// 删除通知
const handleDelete = (record: any) => {
  emit('delete', record as Notification)
}

// 格式化日期
const formatDate = (date: string) => {
  return date ? new Date(date).toLocaleString() : ''
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 